﻿@namespace Blazorise.Docs.Docs.Examples

<Sidebar @ref="sidebar">
    <SidebarContent>
        <SidebarBrand>
            <a href="#">Blazorise Sidebar</a>
        </SidebarBrand>
        <SidebarNavigation>
            <SidebarLabel>Main</SidebarLabel>
            <SidebarItem>
                <SidebarLink To="#" Title="Home">
                    <Icon Name="IconName.Home" Margin="Margin.Is3.FromEnd" />Home
                </SidebarLink>
            </SidebarItem>
            <SidebarItem>
                <SidebarLink Toggled="(isOpen)=> mailSidebarSubItems.Toggle(isOpen)" IsShow>
                    <Icon Name="IconName.Mail" Margin="Margin.Is3.FromEnd" />Email
                </SidebarLink>
                <SidebarSubItem @ref="mailSidebarSubItems" IsShow>
                    <SidebarItem>
                        <SidebarLink To="#email/inbox">Inbox</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="#email/compose">Compose Email</SidebarLink>
                    </SidebarItem>
                    @* other subitems *@
                </SidebarSubItem>
            </SidebarItem>
            <SidebarItem>
                <SidebarLink Toggled="(isOpen)=> appsSidebarSubItems.Toggle(isOpen)" IsShow>
                    <Icon Name="IconName.Smartphone" Margin="Margin.Is3.FromEnd" />Apps
                </SidebarLink>
                <SidebarSubItem @ref="appsSidebarSubItems" IsShow>
                    <SidebarItem>
                        <SidebarLink To="#apps/todo">Todo List</SidebarLink>
                    </SidebarItem>
                </SidebarSubItem>
            </SidebarItem>
        </SidebarNavigation>
    </SidebarContent>
</Sidebar>

@code{
    Sidebar sidebar;
    SidebarSubItem mailSidebarSubItems;
    SidebarSubItem appsSidebarSubItems;

    void ToggleSidebar()
    {
        sidebar.Toggle();
    }
}